<!DOCTYPE html>
<html>

<head>
    <title>注册</title>
    <% include layout/lib.ejs %>
    <link rel="stylesheet" type="text/css" href="/css/register.css" />
</head>

<body>
    <div class="registerBg">

        <div class="regsiterBox">
            <div class="registerTitleBox">欢迎注册 Easy-D 集合开发框架</div>
            <div class="regsiterContent">
                
                <div class="regsiterContentLeft">
                        <a href="/index"><div class="goHome">返回首页</div></a>
                </div>
                <div class="regsiterContentRight">

                    <div class="selectHeaderPOP">
                        <div class="selectHeaderPOPTitle"><i class="fa fa-arrow-left fa-lg"></i>选择头像</div>
                        <div class="selectHeaderPOPContent">
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_03.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_05.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_07.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_09.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_15.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_16.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_17.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_18.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_23.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_24.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_25.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                            <div class="selectHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_26.png" /><i class="fa fa-check-circle fa-lg"></i></div>
                        </div>
                    </div>
                    <div class="selectHeaderBox">
                        <div class="nowHeader">
                            <img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/morentouxiang.png" />
                        </div>
                        <p>选一个帅帅的头像</p>
                    </div>
                    <div class="inputItem" style="margin-top:30px;">
                        <i class="fa fa-user-o fa-lg"></i>
                        <input type="text" name="username" placeholder="请输入登录帐号（必填）" />
                    </div>
                    <div class="inputItem">
                            <i class="fa fa-key fa-fw" style="font-size:16px;"></i>
                        <input type="password" name="password" placeholder="请输入登录密码（必填）" />
                    </div>
                    <div class="inputItem">
                            <i class="fa fa-address-book-o fa-lg"></i>
                            <input type="text" name="nickname" placeholder="请输入用户昵称" />
                    </div>
                    <div class="codeValition">
                        <div class="codeInput">
                                <input type="text" name="code" placeholder="请输入验证码" />
                        </div>
                        <div class="codeData">
                            <img id="codeImage"  style="position:relative;top:-5px;" src="/common/createCode">
                        </div>
                    </div>
                    <div class="registerSubmit">
                        立即注册
                    </div>
                    <p style="height:20px;font-size:13px;text-align: center;margin-top:7px;"><a href="/login">已有帐号，去登录</a></p>
                </div>
            </div>
        </div>
        
    </div>
</body>
<script>
    $(function(){
        

        //当前头像
        var headerData = $(".nowHeader").find("img").attr("src");

        $(".nowHeader").click(function(){
            $(".selectHeaderPOP").animate({"left":0},300);
        });

        $(".selectHeaderPOPTitle").click(function(){
            $(".selectHeaderPOP").animate({"left":350},300);
        });

        $(".selectHeaderItem").click(function(){
            var _index = $(".selectHeaderItem").index(this);
            headerData = $(this).find("img").attr("src");
            $(".selectHeaderItem i").hide();
            $(".selectHeaderItem i").eq(_index).show();
            $(".nowHeader img").attr("src",headerData);
            $(".selectHeaderPOP").animate({"left":350},300);
        
        });

        $(".registerSubmit").click(function(){

            var username = $("input[name=username]").val();
            var password = $("input[name=password]").val();
            var nickname = $("input[name=nickname]").val();
            var code     = $("input[name=code]").val();

            
            if(str_trim(username).length <= 0){
                POP.warning("验证提示","用户帐号不能为空");
                return;
            }

            if(str_trim(password).length <= 0){
                POP.warning("验证提示","用户密码不能为空");
                return;
            }

            if(str_trim(nickname).length <= 0){
                nickname = username;
            }

            if(str_trim(code).length <= 0){
                POP.warning("验证提示","验证码不能为空");
                return;
            }

            var params = {
                username : username,
                password : password,
                nickname : nickname,
                code : code,
                headerData : headerData
            }

            POP.startLoading();

            HTTP.post("/user/register",params,(rs)=>{

                POP.endLoading();
                POP.success("提示信息","恭喜您，注册成功");

                //存储到本地
                customStorage.setPersistenceValue("userId",rs.userid);
                customStorage.setPersistenceValue("userName",rs.username);
                customStorage.setPersistenceValue("nickName",rs.nickname);
                customStorage.setPersistenceValue("header",rs.header);

                setTimeout(()=>{
                    location.href = "/index";
                },2000)
            })
            
        });

        $("#codeImage").click(function(){
            $(this).attr("src","/common/createCode?random=" + Math.random())
        });
    });
</script>
</html>